
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue学习文档 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Vue学习文档 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">ECMAScript 和 JavaScript 的核心关系是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">ECMAScript 是浏览器脚本语言的规范和标准，而 JavaScript 是 ECMAScript 标准的一种实现和扩展。ECMAScript 由 Ecma 国际通过 ECMA-262 标准进行标准化。</div>
          </div>
          <div class="card-source">来源: 什么是ECMAScript & ECMAScript 和 JavaScript 的关系</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">相较于 `var`，ES6中的 `let` 关键字在变量声明方面有哪些主要区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要有三个区别：1. `let` 定义的变量不能重复定义，而 `var` 可以。 2. 使用 `let` 声明的变量在声明前不能被访问，否则会报错，而 `var` 声明的变量会得到 `undefined`。 3. `let` 具有块级作用域，变量只能在定义它的代码块内访问，而 `var` 没有块级作用域，可以跨块访问。</div>
          </div>
          <div class="card-source">来源: let基本使用</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">为什么使用 `const` 关键字声明一个对象后，仍然可以修改该对象的属性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为对象是引用类型，`const` 关键字仅保证变量中保存的对象指针（内存地址）不发生改变。修改对象的属性（如 `param.name = "zs"`）并不会改变这个指针，所以是被允许的。但如果尝试将变量指向一个新的对象（如 `param = new Object()`），则会报错。</div>
          </div>
          <div class="card-source">来源: const</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在MVVM模式中，Vue.js扮演了什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Vue.js是MVVM模式中 ViewModel 层的实现者。它作为连接视图(View)和数据(Model)的中间件，能够观察到数据的变化并更新视图，同时也能监听到视图的变化并通知数据发生改变，实现了双向数据绑定。</div>
          </div>
          <div class="card-source">来源: MVVM 模式的实现者——双向数据绑定模式</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规则</div>
          <div class="card-question">定义Vue组件时，其 `data` 属性为什么必须是一个函数而不是一个对象？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规则</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在Vue组件中，`data` 必须是一个函数，因为组件是可以被复用的。如果 `data` 是一个对象，那么所有组件实例将共享同一个数据对象。通过返回一个新对象，可以确保每个组件实例都维护一份被返回对象的独立拷贝，避免数据污染。</div>
          </div>
          <div class="card-source">来源: 组件小结</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">简述Vue组件的生命周期包含哪些主要阶段。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个Vue组件会经历：初始化、创建、绑定、更新、销毁等主要阶段。在这些不同阶段，都会有相应的生命周期钩子函数（如 created, mounted, updated, destroyed 等）被调用。</div>
          </div>
          <div class="card-source">来源: 组件的生命周期</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">对于Java开发者来说，应如何理解Node.js、npm和webpack三者之间的关系？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">可以类比Java体系：Node.js是JavaScript的后端运行平台，相当于JDK；npm是Node.js的包管理工具，相当于Maven的包依赖管理部分；webpack是前端工程化打包工具，相当于Maven的工程自动化构建部分。</div>
          </div>
          <div class="card-source">来源: Java系理解nodejs/npm/webpack的关系 & 总结</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">Vue-router中的 `route`, `routes`, 和 `router` 这三个核心概念分别是什么意思？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. `route`：指一条单独的路由规则，是单数形式，例如将一个路径映射到一个组件。<br>2. `routes`：是一组路由规则的集合，通常表现为一个数组。<br>3. `router`：是一个管理路由的机制或管理者，它会根据用户的请求到 `routes` 中查找匹配的规则并渲染对应的组件。</div>
          </div>
          <div class="card-source">来源: Vue-router & 简介</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为什么在Vue 2.0及以上版本中，官方推荐使用 Axios 进行AJAX通信？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为Vue.js是一个专注于视图层的框架，本身不包含AJAX通信功能。虽然其作者曾开发了 `vue-resource` 插件，但在Vue进入2.0版本后，为了遵循“关注度分离原则”，停止了对该插件的维护，并转而推荐功能更强大的 Axios 框架。</div>
          </div>
          <div class="card-source">来源: 为什么要使用 Axios</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
